<template>
	<div class="content">
		<view class="flex2" v-for="(item,index) in aboutUsList" :key="index">
			<view class="headBox">
				<view class="flex">
					<view class="headImgBox imgBox">
						<image class="headImg" :src="item.emitUser.avatar" mode=""></image>
						<image class="flag-img" :src="item.type?'../../static/personal/zan.png':'../../static/personal/message.png'" mode />
					</view>
					<view>
						<view class="font-title1 font-title3">{{item.emitUser.wx_name}}</view>
						<view class="font-title2">{{item.time}}</view>
					</view>
				</view>
				<view class="font-title1 font-title4">{{item.type?"等"+item.num+"人赞了你的帖子":"评论了："+item.message.content}}</view>
			</view>
			<view class="screenshot imgBox">
				<!-- 这里是截图 -->
				<image :src="item.post.imgs" mode=""></image>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				aboutUsList: [],
				maxId: ''
			};
		},
		methods: {
			// 获取列表信息
			getList() {
				let data = {
					maxId: this.maxId
				}
				this.sgAjax.getUserAboutMe(data).then(res => {
					let aboutUsList = this.aboutUsList
					this.aboutUsList = aboutUsList.concat(res.data)
					let list = this.aboutUsList
					let index = list.length - 1
					this.maxId = list[index].message.id
				})
			}
		},
		onLoad() {

			this.getList()
		},
		onReachBottom() {
			this.getList()
		}

	};
</script>

<style scoped>
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
	}

	.imgBox {
		border-radius: 8rpx;
		background-color: #cccccc;
	}

	.headImgBox {
		width: 100rpx;
		height: 100rpx;
		position: relative;
		margin-right: 26rpx;
	}

	.headImg {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.screenshot {
		width: 144rpx;
		height: 144rpx;
	}

	.flag-img {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: -10rpx;
		bottom: -10rpx;
	}

	.headBox {
		width: calc(100% - 144rpx);
	}

	.font-title1 {
		font-size: 28rpx;
		color: #040319;
		line-height: 28rpx;
		/* display: inline-block; */
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.font-title3 {
		margin-bottom: 16rpx;
	}

	.font-title2 {
		font-size: 24rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 24rpx;
		/* display: inline-block; */
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.font-title4 {
		margin-top: 16rpx;
	}
</style>
